import { t } from 'i18next'
import React, { useEffect, useMemo, useState } from 'react'
import { StyledWrap, StyledMeetingSpaceHeader } from './style'
import { Tab } from '@kedacom/react-next'
import { Docs, KisRecord, KisSign, Quality, Record, RollCall, SystemInfo } from './blocks'
import { getUrlParams } from '@/utils'
import { fetchGetMeetingSpaceInfo } from '@/api/meetingSpace'
import { useGlobalStore } from '@/store/global'
import { meetingStatus } from '@/api/global/interface'
import useInit from '@/hooks/useInit'
import Header from '@/components/Header'
import useStorageEvent from '@/hooks/useStorageEvent'
import { IMeetingInfo } from '@/api/meetingSpace/interface'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
const meetingMoid = getUrlParams('meetingMoid') ?? ''
const App = () => {
	useInit()
	useStorageEvent()
	const user = useGlobalStore((state) => state.user)
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const [currentTab, setCurrentTab] = useState(1)
	const [tabData, setTabData] = useState<{ label: string; value: number; hidden?: boolean }[]>([])
	const [meetingInfo, setMeetingInfo] = useState<IMeetingInfo>({
		meetingMoid,
		name: '',
		e164: '',
		dateTime: '',
		startTime: '',
		status: null,
		isSigned: false,
		isRecorded: false,
		createBy: '',
	})

	useEffect(() => {
		setTabData([
			{ label: t('会议文档'), value: 1, hidden: !user?.enable_upload },
			{ label: t('会议纪要'), value: 2, hidden: !SWITCH.kis.record },
			{ label: t('会议录像'), value: 3, hidden: !SWITCH.vrs.meeting_video },
			{
				label: t('智能签到表'),
				value: 4,
				hidden: !SWITCH.kis.sign || meetingInfo.status !== meetingStatus.END,
			},
			{ label: t('点名轮询签到表'), value: 5, hidden: meetingInfo.status !== meetingStatus.END },
			{ label: t('检测记录'), value: 6, hidden: !SWITCH.ops },
			{ label: t('系统消息'), value: 7 },
		])
	}, [meetingInfo, user, SWITCH])

	useEffect(() => {
		fetchGetMeetingSpaceInfo(meetingMoid).then((data) => {
			if (data) {
				setMeetingInfo(data)
			}
		})
	}, [])
	useEffect(() => {
		if (meetingInfo.status === meetingStatus.END && !user?.enable_upload) {
			setCurrentTab(2)
		} else {
			setCurrentTab(1)
		}
	}, [meetingInfo, user])
	return (
		<>
			<WebRecommendBrowser />
			<Header />
			<StyledWrap className="meeting-space-wrap">
				<StyledMeetingSpaceHeader>
					<div className="space-title">
						{t('会议空间')}
						<span>{t('会议结束30天后系统自动删除会议文档')}</span>
					</div>
					<div className="space-details">
						<div className="space-details-item">
							<span className="item-label">{t('会议名称')}</span>
							<span className="item-dec">{meetingInfo.name}</span>
						</div>
						<div className="space-details-item">
							<span className="item-label">{t('会议时间')}</span>
							<span className="item-dec">{meetingInfo.dateTime}</span>
						</div>
						<div className="space-details-item">
							<span className="item-label">{t('会议号码')}</span>
							<span className="item-dec">{meetingInfo.e164}</span>
						</div>
					</div>
				</StyledMeetingSpaceHeader>
				<Tab
					type="button"
					style={{ marginBottom: 30 }}
					data={tabData.filter((item) => !item.hidden)}
					value={currentTab}
					onChange={(e, val) => {
						setCurrentTab(val)
					}}
				/>
				{currentTab === 1 && <Docs meetingInfo={meetingInfo} />}
				{currentTab === 2 && <KisRecord meetingInfo={meetingInfo} />}
				{currentTab === 3 && <Record meetingInfo={meetingInfo} />}
				{currentTab === 4 && <KisSign meetingInfo={meetingInfo} />}
				{currentTab === 5 && <RollCall meetingInfo={meetingInfo} />}
				{currentTab === 6 && <Quality meetingInfo={meetingInfo} />}
				{currentTab === 7 && <SystemInfo meetingInfo={meetingInfo} />}
			</StyledWrap>
		</>
	)
}
export default App
